<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	String urlPath = request.getContextPath();
	String error = request.getParameter("error");
	boolean isError = false;
	if (null != error) {
		isError = true;
	}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
	<style type="text/css">
		* {
			margin:0;
			padding:0;
		}

		html {
			height:100%;
		}

		body {
			min-height:100%;
			box-sizing: border-box;
			background:
					radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0,
					radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13%, rgba(255,255,255,0) 14%) 0 0,
					radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19%, rgba(255,255,255,0) 20%) 0 110px,
					radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) -130px -170px,
					radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) 130px 370px,
					radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13%, rgba(255,255,255,0) 14%) 0 0,
					linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%);
			background-size: 470px 470px, 970px 970px, 410px 410px, 610px 610px, 530px 530px, 730px 730px, 100% 100%;
			background-color: #840b2a;
		}
		.login-container{
			position: absolute;
			width: 30%;
			left: 35%;
			top: 35%;
		}
		.login-container>.header{
			color: #ffffff;
			background-color: rgba(255, 130, 19, 0.9);
			padding: 20px;
			border-bottom: 1px solid #ff8213;
			border-radius: 5px 5px 0 0;
		}
		.login-container>.body{
			background-color: rgba(255, 255, 255, 0.9);
			padding: 20px;
			border-radius: 0 0 5px 5px;
		}
		.login-container>.body .form-item [type=text], .login-container>.body .form-item [type=password]{
			color: #aaaaaa;
			font-weight: bold;
			display: inline-block;
			border: 1px solid rgba(255, 130, 19, 0.9);
			border-radius: 5px;
			padding: 10px;
			font-size: 16px;
			margin: 10px 0;
		}
		.login-container>.body .form-item [type=text] .active, .login-container>.body .form-item [type=password] .active{
			border: 1px dashed rgba(219, 79, 70, 0.9);
		}
		.login-container>.body .form-submit input[type=submit]{
			display: inline-block;
			width: 100%;
			padding: 10px 20px;
			color: #ffffff;
			background-color: rgba(255, 130, 19, 0.9);
			cursor: pointer;
			border: 0;
			border-radius: 5px;
			font-size: 16px;
			margin-top: 20px;
		}
		.login-container>.body .form-submit input[type=submit]:focus,
		.login-container>.body .form-submit input[type=submit]:hover{
			background-color: #ff8213;
		}
		.body table td{
			padding-left: 10px;
		}
		.hyc-nav{
			background-color: rgba(0, 0, 0, 0.5);
		}
		.hyc-nav img{
			height: 60px;
		}
		.hyc-nav>.title{
			color: #ffffff;
			display: inline-block;
			position: relative;
			top: -25px;
		}
		.msg{
			position: absolute;
			background-color: rgba(0, 0, 0, 0.6);
			color: rgba(255, 255, 255, 0.9);
			font-size: 16px;
			width: 20%;
			left: 40%;
			padding: 10px 20px;
			display: none;
			border: 0;
			border-radius: 5px;
			bottom: 0;
			transition: all .5s ease-in-out;
		}
		.msg.active{
			display: block;
			bottom: 60px;
		}
	</style>
</head>
<body>
	<div class="hyc-nav">
		<img src="<%=urlPath %>/image/huiyunche-logo.gif">
		<h3 class="title">慧运车管理平台</h3>
	</div>
	<div class="login-container">
		<div class="header">
			<h3>管理员登录</h3>
		</div>
		<div class="body">
			<form action="<%=urlPath %>/login" method="post">
				<div style="text-align: center;">
					<table border="0" style="display: inline-table;">
						<tr class="form-item">
							<th>用户名</th>
							<td>
								<input name="username" id="id_username" placeholder="请输入用户名" type="text" required="required">
							</td>
						</tr>
						<tr class="form-item">
							<th>密码</th>
							<td>
								<input name="password" id="id_password" placeholder="请输入密码" type="password" required="required">
							</td>
						</tr>
						<tr class="form-submit">
							<td colspan="2">
								<input type="submit" value="登录">
							</td>
						</tr>
					</table>
				</div>
			</form>
		</div>
	</div>
	<div class="msg" id="logo_msg"></div>
	<script type="text/javascript">
	
		var msg = document.getElementById('logo_msg');
		
		// 回车键监听
		document.onkeydown = function(event) {
			 if (event.keyCode == 13) {
				 submitForm();
	         }
		};
		
		// 页面加载完成执任务
		window.onload = function() {
			if (<%=isError %>) {
				msgTimeout('登录失败，请重新登录');
			}
		};
		
		// 提交
		function submitForm() {
			document.getElementById('submit_btn').submit();
		};
		
		// 消息定时器
		function msgTimeout (errText) {
			msg.className = 'msg active';
			msg.innerHTML = errText;
			setTimeout(function() {
				msg.className = 'msg';
			}, 3000);
		}
		
	</script>
</body>
</html>